<template>
    <div class="materiallibrary">
        <a-layout class="console-body">
            <a-layout-header class="header-content">
                <div class="header-logo">
                    <img @click="$router.push('/')" class="logo" src="@/assets/images/data-logo.png" alt />
                    <div v-show="this.$route.path != '/materiallibrary/home'" class="header-home" @click="$router.push('../home')">
                        <img src="@/assets/images/material/home.png" alt />
                        <span>政务智库素材中心</span>
                    </div>
                </div>

                <div class="header-user">
                    <a-dropdown :trigger="['hover']" @click="e => e.preventDefault()" style="minWidth: 90px;height:50px;margin-right:15px">
                        <div style="display:inline-block">
                            <img src="@/assets/images/head-img.png" alt />
                            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                {{cname}}
                                <a-icon type="down" />
                            </a>
                        </div>
                        <a-menu slot="overlay" class="sys-opts">
                            <!-- <a-menu-item key="0" @click="settings">设置</a-menu-item> -->
                            <a-menu-item @click="logout" key="1">退出</a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </a-layout-header>
            <a-layout-content class="main-content" style="width:100%">
                <div class="content">
                    <div class="main-box">
                        <router-view></router-view>
                    </div>
                </div>
            </a-layout-content>
        </a-layout>
        <!-- <UserInform
      :inform-visible="informVisible"
      :inform-data="informData"
      @saveFunc="saveFunc"
      @refreshLabelInput="refreshLabelInput"
      @closeFunc="informVisible=false"
        />-->
    </div>
</template>

<script>
import { outlogin, getUserInfo } from "@/api/login";
import { mapState, mapGetters, mapMutations } from "vuex";
import UserInform from "@/components/configuration/user/userInform";
export default {
    components: {
        UserInform,
    },
    data() {
        return {
            cname: JSON.parse(localStorage.getItem("userInfo")).cname,
            photo: "",
            collapsed: false,
            loginName: "admin",
            informData: {},
            informVisible: false,
        };
    },
    mounted() {
        // this.getUserInform();
    },
    methods: {
        // //点击设置打开个人设置弹窗
        // settings() {
        //   // if (JSON.stringify(this.informData) === "{}") {
        //   this.getUserInform();
        //   // }
        //   this.informVisible = true;
        // },
        //点击注销
        logout() {
            outlogin()
                .then((res) => {
                    //登出
                    localStorage.removeItem("TOKEN");
                    localStorage.removeItem("refreshToken");
                    localStorage.removeItem("userInfo");
                    localStorage.removeItem("permission");
                    localStorage.removeItem("userType");
                    this.$router.push("/login");
                    this.$message.destroy();
                    this.$message.success(res.msg);
                })
                .catch((err) => {
                    this.$message.destroy();
                    this.$message.error(err);
                });
        },
        // //更新列表
        // refreshLabelInput() {
        //   this.getUserInform();
        // },
        // //获取当前个人设置详情
        // getUserInform() {
        //   getUserInfo()
        //     .then((res) => {
        //       let data = res.data;
        //       this.informData = data;
        //       this.$store.commit("SET_USERINFO", { photo: data.photo});
        //     })
        //     .catch((err) => {
        //       this.$message.destroy();
        //       this.$message.error(err);
        //   });
        // },
        // saveFunc() {
        //   console.log("点击了确定");
        //   this.informVisible = false;
        //   localStorage.setItem("photo", this.photo);
        // },
    },
    computed: {
        ...mapGetters(["userInfo", "userAvatar"]),
    },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.materiallibrary {
    // height: 100%;
    min-height 100%;
    background: url('../../assets/images/material/home-bg.png') center no-repeat;
    background-size: cover;
    padding-bottom 100px;
}

.ant-layout-header {
    padding: 0 20px;
    // background: url('../../assets/images/header-bg.jpg') no-repeat;
    // background-size: cover;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0);
}

.ant-menu-dark, .ant-menu-dark .ant-menu-sub {
    background: rgba(255, 255, 255, 0);
}

.main-box {
    max-width: 1200px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.console-body {
    height: 100%;
    background: rgba(0, 0, 0, 0);

    .header-content {
        position: fixed;
        z-index: 1009;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;

        .header-logo {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        img.logo {
             margin-right: 14px;
            width: 140px;
        }

        .header-user {
            img {
                width: 30px;
                height: 30px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
    }

    .main-content {
        margin: 0 auto;
        margin-top: 76px;
        width: 1210px;

        .content {
            display: flex;
            justify-content: space-between;
        }
    }
}

.header-home {
    display flex
    justify-content center
    align-items center
    border-left 1px solid #41415f
    padding-left 30px
    cursor pointer
    height 30px
    img {
        width: 28px;
        margin-right 14px
    }
    span{
        font-size 20px
        color #fff
    }
}
</style>
